<script setup>
import {appMainBarChange} from "@/utils/provideKey"
import {NIcon} from 'naive-ui'
import {HomeFilled, CaretBottom} from '@element-plus/icons-vue'
import {RouterLink} from 'vue-router'
import {useLocale} from '@/utils/useLocale'
const $menuI18n = useLocale('menu')
const changeMainbarHandler = inject(appMainBarChange)
//更改标题栏
changeMainbarHandler(options => {
  options.logoShow = true;
  options.refreshShow = true;
  options.settingShow = true;
  options.notifyShow = true;
  options.accountShow = true;
})
//菜单
const collapsed = ref(true)
const menuOptions = [
  {
    label: () => {
      return h('span', $menuI18n.value.overview)
    },
    key: "Overview", //route name
    x: {
      icon: HomeFilled
    }
  }
]
const renderMenuLabel = (option) => {
  if ("href" in option) {
    return h(
        "a",
        {href: option.href, target: "_blank"},
        typeof option.label === 'function' ? option.label : () => (option.label)
    )
  } else {
    return h(
        RouterLink,
        {to: {name: option.key}},
        typeof option.label === 'function' ? option.label : () => (option.label)
    )
  }
}
const renderMenuIcon = (option) => {
  return h(NIcon, null, {default: () => h(option.x.icon)})
}
const expandIcon = () => {
  return h(NIcon, null, {default: () => h(CaretBottom)})
}
</script>

<template>
  <div class="main">
    <!--菜单示例(Example) ***start-->
    <n-layout has-sider>
      <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="60"
          :width="200"
          :collapsed="collapsed"
          show-trigger
          @collapse="collapsed = true"
          @expand="collapsed = false"
          class="side-menu"
      >
        <n-scrollbar trigger="hover">
          <n-menu
              :collapsed="collapsed"
              :collapsed-width="60"
              :collapsed-icon-size="22"
              :root-indent="12"
              :indent="16"
              :options="menuOptions"
              :render-label="renderMenuLabel"
              :render-icon="renderMenuIcon"
              :expand-icon="expandIcon"
              :default-value="$route.name"
          />
        </n-scrollbar>
      </n-layout-sider>

      <n-layout class="content">
        <n-scrollbar trigger="hover" :x-scrollable="true">
          <n-card :bordered="false">
            <router-view/>
          </n-card>
        </n-scrollbar>
      </n-layout>
    </n-layout>

    <!--菜单示例(Example) ***end-->
  </div>
</template>

<style lang="less" scoped>
@layout-height: calc(100vh - var(--common-navbar-more-height));

.main {
  height: 100%;
  max-height: 100%;
}

.side-menu,
.content {
  height: @layout-height;
  max-height: @layout-height;
}

.side-menu {
  background-color: var(--action-color);
}

.content {
  border-top: 1px solid var(--divider-color);
}

//end
</style>